<template>
  <div class="detail">
    <van-cell :title="detailInfo.roomName" :label="detailInfo.placeName">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <div class="zt" :class="detailInfo.status == '0' ? 'zt0' : 'zt2'">{{ judgeZt(detailInfo.status, deptName) }}</div>
      </template>
    </van-cell>
    <div class="yjjy flex-aligns" v-if="detailInfo.procDept && (this.deptCode && this.deptCode.indexOf('XH') !== -1)">
      <p class="title">处理单位</p>
      <p class="content">{{ detailInfo.procDept }}</p>
    </div>
    <div class="yjjy">
      <p class="title">意见建议</p>
      <p class="content">{{ detailInfo.eventContent }}</p>
    </div>
    <div class="fj">
      <p class="title">附件</p>
      <p class="content">
        <van-image
          width="100"
          height="100"
          :src="'/api' + item.filename"
          v-for="item in detailInfo.fileList" :key="item.id"
          @click="imagePrevel(item.filename)"
        />
      </p>
    </div>

    <!-- 操作页面 -->
    <div class="operation" v-if="deptCode == detailInfo.procDeptCode">
      <div class="yjjy" v-if="detailInfo.status == '0'">
        <p class="title">处理意见</p>
        <p class="content">{{ detailInfo.procOpinions }}</p>
        <p class="title" v-if="deptName !== '游客'">处理方式</p>
        <p class="content" v-if="deptName !== '游客'">{{ detailInfo.procMethed }}</p>
        <p class="title" v-if="deptName !== '游客'">处理部门</p>
        <p class="content" v-if="deptName !== '游客'">{{ detailInfo.procDept }}</p>
        <p class="title">处理时间</p>
        <p class="content">{{ detailInfo.processTime }}</p>
      </div>
      <!-- 公安操作 -->
      <div class="operation" v-if="['业主', '游客'].indexOf(deptName) == -1 && detailInfo.status !== '0'">
        <van-form @submit="onSubmit" :show-error-message="false">
          <van-field
            v-model="form.procOpinions"
            name="procOpinions"
            rows="3"
            autosize
            label="处理意见"
            type="textarea"
            placeholder="请填写处理意见"
            :rules="[{ required: true, message: '请填写处理意见' }]"
            maxlength="8000"
            show-word-limit
            required
          />
          <van-field
            clickable
            readonly
            :value="form.procMethed"
            name="procMethed"
            label="处理方式"
            placeholder="点击选择处理方式"
            :rules="[{ required: true, message: '请选择处理方式' }]"
            required
            @click="showPickerClfs = true"
          />
          <van-field
            clickable
            readonly
            name="jsdwmc"
            :value="form.jsdwmc"
            v-if="form.procMethed == '转送'"
            label="处理部门"
            placeholder="点击选择处理部门"
            :rules="[{ required: true, message: '请选择处理部门' }]"
            required
            @click="showPickerClbm = true"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </div>
    </div>
    <!-- pop自定义 -->
    <van-popup v-model="showPickerClfs" position="bottom">
      <van-picker
        title="处理方式"
        show-toolbar
        :columns="clfsList"
        @confirm="onConfirmClfs"
        @cancel="showPickerClfs = false"
        :default-index="0"
      />
    </van-popup>
    <van-popup v-model="showPickerClbm" position="bottom">
      <van-picker
        title="处理部门"
        show-toolbar
        value-key="deptName"
        :columns="dealClbmList"
        @confirm="onConfirmClbm"
        @cancel="showPickerClbm = false"
        :default-index="0"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { appEventDetail, handleEvent } from '@/api/info';
import { getSnedDeptListByCode } from '@/api/system/dict/data'
import { ImagePreview } from 'vant';
export default {
  name: 'detail',
  dicts: ['ptsj_dept_list'],
  data() {
    return {
      detailInfo: {},
      id: '',
      form: {
        procOpinions: '',
        procMethed: '',
        jsdwmc: '',
        jsdwdm: ''
      },
      clfsList: [],
      clbmList: [],
      showPickerClfs: false,
      showPickerClbm: false,
      role: window.localStorage.getItem('role')
    }
  },
  created() {
    if(this.$route.query.id) {
      this.id = this.$route.query.id
    }
  },
  mounted() {
    // console.log(this.deptCode)
    this.appEventDetail();
    if(this.deptCode && this.deptCode.indexOf('XH') !== -1) {
      this.clfsList = ['直接答复（含简易办理）', '受理告知（其他法定途径）', '转送'];
      this.getSnedDeptListByCode();
    } else {
      this.clfsList = ['直接答复（含简易办理）', '受理告知（其他法定途径）', '退回']
    }
  },
  computed: {
    ...mapGetters(['deptName', 'deptCode']),
    dealClbmList() {
      let { clbmList } = this;
      let data = [];
      clbmList.filter(item => {
        if(item.deptName !== this.deptName) {
          data.push(item.deptName);
        }
      })
      return data
    }
  },
  methods: {
    judgeZt(val, deptName) {
      if(val == '0') {
        return '处理完毕'
      } else {
        return '待处理'
      }
      /* if(deptName == '协会') {
        if(val == '1') {
          return '待处理'
        } else if(val == '2') {
          return '已流转'
        } else if(val == '3') {
          return '退回'
        } else if(val == '0') {
          return '处理完毕'
        }
      } else {
        if(val == '0') {
          return '处理完毕'
        } else {
          return '待处理'
        }
      } */
    },
    appEventDetail() {
      appEventDetail(this.id).then(res => {
        // console.log(res)
        if(res.code == 200) {
          this.detailInfo = res.data;
        }
      })
    },
    getSnedDeptListByCode() {
      getSnedDeptListByCode({ deptcode: this.deptCode.substring(0, 12) }).then(res => {
        // console.log(res)
        if(res.code == 200) {
          this.clbmList = res.data;
        }
      })
    },
    imagePrevel(filename) {
      ImagePreview(['/api' + filename])
    },
    open() {
      this.show = true
    },
    onConfirmClfs(value, index) {
      this.form.procMethed = value;
      this.showPickerClfs = false;
    },
    onConfirmClbm(row, index) {
      // console.log(row)
      this.form.jsdwmc = row;
      this.form.jsdwdm = this.clbmList[this.clbmList.map(item => item.deptName).indexOf(row)].deptcode;
      this.showPickerClbm = false;
    },
    onSubmit(values) {
      console.log('submit', values);
      if(values) {
        let params = this.form;
        params.glid = this.id;
        handleEvent(params).then(res => {
          // console.log(res)
          if(res.code == 200) {
            this.$notify({ type: 'success', message: '处理成功！' });
            this.$router.push('/yjjy')
          }
        })
      }
    },
  }
}
</script>

<style lang="less" scoped>
.detail {
  background-color: #F5F5F5;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  /deep/ .van-cell__title {
    text-align: left;
  }
  .zt {
    border-radius: 2px;
    font-family: PingFang SC;
    font-weight: regular;
    font-size: 11px;
    letter-spacing: 0px;
    text-align: center;
    padding: 2px 4px;
    height: fit-content;
    border: 0.5px solid #FF8F1F;
    color: #FF8F1F;
    &.zt1 {
      border: 0.5px solid #FF8F1F;
      color: #FF8F1F;
    }
    &.zt0 {
      border: 0.5px solid #00B578;
      color: #00B578;
    }
    &.zt2 {
      border: 0.5px solid #31d5e3;
      color: #31d5e3;
    }
    &.zt3 {
      border: 0.5px solid #ca4747;
      color: #ca4747;
    }
  }

  .flex-aligns {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .yjjy, .fj {
    margin-top: 16px;
    background-color: #fff;
    padding: 16px;
    box-sizing: border-box;
    .title {
      color: #666666;
      font-size: 12px;
      line-height: 22px;
      letter-spacing: 0px;
      text-align: left;
    }
    .content {
      color: #333333;
      font-size: 13px;
      line-height: 24px;
      letter-spacing: 0px;
      text-align: left;
    }
  }
  .operation {
    margin-top: 12px;
    /deep/ .van-field {
      display: block;
      .van-field__label {
        font-size: 13px;
        width: 90%;
      }
    }
  }
}
</style>